<template>
  <div class="employee-container">
    <div class="top">
      <el-input
        ref="inp"
        v-model="keyword"
        type="text"
        placeholder="请输入员工姓名"
        style="width: 300px"
        @keyup.enter.native="search"
      >
        <i
          slot="prefix"
          class="el-input__icon el-icon-search"
          @click="search"
        />
      </el-input>
      <!-- @focus="changeValue" -->
      <el-button type="primary" @click="$router.push({ name: 'AddEmployee' })"
        >添加员工</el-button
      >
    </div>
    <div class="main">
      <!-- 表格区域 -->
      <el-table :data="employeeList" style="width: 100%">
        <el-table-column label="员工姓名" prop="name" />
        <el-table-column label="账号" prop="username" />
        <el-table-column label="手机号" prop="phone" />
        <el-table-column label="账号状态" prop="status">
          <template v-slot="{ row }">
            <span>{{ row.status === 1 ? "正常" : "已禁用" }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template v-slot="{ row }">
            <el-button
              type="text"
              @click="$router.push(`/employee/detail/${row.id}`)"
              >编辑</el-button
            >
            |
            <el-button type="text" @click="btnCancel(row)">{{
              row.status === 1 ? "禁用" : "启用"
            }}</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页功能 -->
      <el-row style="height: 60px" align="middle" type="flex" justify="center">
        <el-pagination
          :current-page="queryParams.page"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="queryParams.pagesize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @current-change="pageChange"
          @size-change="pageSizeChange"
        />
      </el-row>
    </div>
  </div>
</template>

<script>
import { getEmployee, updateEmployee } from "@/api/employee";
export default {
  name: "EmployeeIndex",
  data() {
    return {
      keyword: "",
      employeeList: [],
      // 查询参数
      queryParams: {
        pageSize: 10,
        page: 1,
      },
      total: 0, // 记录数据总数
      employeeDetail: {}, // 记录单个员工数据
    };
  },
  created() {
    this.getEmployeeList();
  },
  methods: {
    async getEmployeeList() {
      const res = await getEmployee({
        ...this.queryParams,
        name: this.keyword,
      });
      this.employeeList = res.data.records;
      this.total = res.data.total;
    },
    pageChange(newPage) {
      this.queryParams.page = newPage;
      this.getEmployeeList();
    },
    pageSizeChange(newpageSize) {
      this.queryParams.page = 1;
      this.queryParams.pageSize = newpageSize;
      this.getEmployeeList();
    },
    btnCancel(row) {
      this.$confirm("确定调整该张航的状态?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(async () => {
        await updateEmployee({
          id: row.id,
          status: +!row.status,
        });
        this.getEmployeeList();

        this.$message({
          type: "success",
          message: "账号状态更改成功!",
        });
      });
    },
    search: _.debounce(function () {
      this.getEmployeeList();
    }, 2000),
  },
};
</script>

<style lang='scss' scoped>
.top {
  display: flex;
  justify-content: space-between;
  padding: 30px;
  .el-input {
    i {
      cursor: pointer;
    }
  }
}
.main {
  margin: 0 30px;
  border: 1px solid rgba(243, 244, 247);
  border-radius: 5px;
}
</style>
